﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Chat : Index</title>
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>

    <link href='http://fonts.googleapis.com/css?family=Knewave' rel='stylesheet' type='text/css'>


    <link href="../../Content/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(function () {
        $("input:submit, a, button", ".wrapper").button();
        $("a", ".demo").click(function () { return false; });
    });


    $(document).ready(function () {

        setInterval(function () {

            $.ajax({
                url: '/Chat/UpdateChatRoom',
                type: 'GET',
                success: function (data) {
                    $("#result").html(data);
                },
                error: function (data) {
                    $("#result").html('error updating chat...');
                }
            });
        }, 1000);

        $('#btn-submit').click(function () {
            var txt = { "text": $('#uiTeaxarea').val() };
            $.ajax({
                url: '/Chat',
                type: 'POST',
                data: txt,
                success: function (data) {
                    $("#uiTeaxarea").val('');
                }
            });
        });
    });
</script>
</head>
<body>
<form method="post">
    <div id="wrapper">
    <h1 id="identity">Superhero chat</h1>
        <textarea name="text" id="uiTeaxarea" cols="30" rows="8"></textarea>
        <div class="btn-wrapper">
            <input id="btn-submit" type="button" value="send" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false" />
        </div>
        <div id="result"></div>
    </div>
</form>
</body>
</html>